import React, { PureComponent } from 'react';
import styles from './projectModal.less'
import { withRouter } from "react-router";
import PropTypes from 'prop-types'
import md5 from 'js-md5';
import { parseHour } from '@/utils'

function formatNum(num, demical=1){
  let result = num >= 10000 ? `${(num/10000).toFixed(demical)}` : (num*1).toFixed(demical);
  return result ? `${result}`.split('.') : ["0"];
}

export default class CarModal extends PureComponent {

  static propTypes = {
    data: PropTypes.Array
  }

  constructor(props){
    super(props)
    this.state = {
      visible: false,
      defaultData: {},
      more: false,
      list: [],
      keys: [],
      closeKeys: {} //如果为true则关闭
    }
  }

  componentWillReceiveProps(props, nextProps) {
    this.setState({ keys: Object.keys(props.listmap) })
  }

  /**
   * @param {Object} 工程数据
   */
  show = (data) => {
    this.setState({ visible: true, defaultData: data })
  }

  dismiss = () => {
    this.setState({ visible: false, more: false })
  }

  toCarDetail = (data) => {
    this.props.history.push(`carDetail?equipCode=${data.equipCode}&source=selfpage&token=${md5(data.equipCode+'selfpage'+'s$31d0dl1!~93-kHj^S')}`)
  }
  

  itemClose = (data) => {
    const tempKeys = JSON.parse(JSON.stringify(this.state.closeKeys))
    const key = data.bcInfo.equipCode;
    tempKeys[key] = tempKeys[key] ? false : true;
    this.setState({ closeKeys: tempKeys })
  }

  renderItem = (data, more=true) => {
    const totalOilNum = formatNum(data.statistics.totalOilNum);
    const tempWorkTime = parseHour(data.statistics.workTime);
    const workTime= formatNum(tempWorkTime);
    const totalQuantityNum = formatNum(data.statistics.totalQuantityNum);
    return <div className={styles.list_item} key={data.equipCode} onClick={()=> {this.toCarDetail(data.bcInfo) }}>
      <div className={styles.modal_header}>
        <div className={styles.item}>
          <div className={styles.item_value}>{totalOilNum[0]}{totalOilNum[1] && '.'}<span className={styles.standard}>{totalOilNum[1]}{data.statistics.totalOilNum>=10000 && '万'}L</span></div>
          <div className={styles.item_name}>今日油耗</div>
        </div>
        <div className={styles.item}>
          <div className={styles.item_value}>{workTime[0]}{workTime[1] && '.'}<span className={styles.standard}>{workTime[1]}{tempWorkTime>=10000 && '万'}H</span></div>
          <div className={styles.item_name}>泵送计时</div>
        </div>
        <div className={styles.item}>
          <div className={styles.item_value}>{totalQuantityNum[0]}{totalQuantityNum[1] && '.'}<span className={styles.standard}>{totalQuantityNum[1]}{data.statistics.totalQuantityNum>=10000 && '万'}M³</span></div>
          <div className={styles.item_name}>工作方量</div>
        </div>
      </div>
      <div className={styles.car_inform}>
        <div className={styles.project_no}>{data.index}</div>
        <div className={styles.project_name}>{data.bcInfo.equipCode}</div>
        <div className={styles.project_status} style={{ color: data.bcInfo.state ? '#989898' : '#2DD5B8'}}>{data.bcInfo.state?'离线':'在线'}</div>
        {!!more && <img className={styles.modal_up} onClick={(e)=>{ e.stopPropagation(); this.itemClose(data) }} src={require('../assets/img/modal_down.png')} />}
      </div>
      {!!more && <div className={styles.list_seperator}></div>}
    </div>
  }

  renderItemOff = (data) => {
    return <div className={styles.list_item} key={data.equipCode} onClick={()=> {this.toCarDetail(data.bcInfo) }}>
    <div className={styles.car_inform}>
      <div className={styles.project_name}>{data.bcInfo.equipCode}</div>
      <div className={styles.project_status} style={{ color: data.bcInfo.state ? '#989898' : '#2DD5B8'}}>{data.bcInfo.state?'离线':'在线'}</div>
      {<img onClick={(e)=>{ e.stopPropagation(); this.itemClose(data) }} className={styles.modal_up} src={require('../assets/img/modal_up.png')} />}
    </div>
    <div className={styles.list_seperator}></div>
  </div>
  }
    
  render() {
    const { defaultData, more, keys, closeKeys } = this.state;
    const { listmap } = this.props;
    // console.log('listmap', listmap, keys);
    if(!this.state.visible) return null
    return (
      <div className={styles.modal}>
        <div style={{ flex: 1 }} onClick={(e)=>{ this.dismiss() }}></div>
        <div className={styles.list}>
          {this.renderItem(listmap[defaultData.equipCode], false)}
          {!!more && <div className={styles.list_seperator}></div>}
          {
            more && keys.map((key, index)=>{
              const data = listmap[key];
              if(data.bcInfo.equipCode==this.state.defaultData.equipCode) return null;
              return closeKeys[key] ? this.renderItemOff(data) : this.renderItem(data)
            })
          }
        </div>
        {more ? 
          // <div className={styles.project_mini} onClick={()=>{ this.setState({ more: false })} }>
          //   <img className={styles.mini_icon} src={require('../assets/img/map/down.png')} />
          // </div>
          <div className={styles.project_more} onClick={()=>{ this.setState({ more: false })} }>
            <img className={styles.more_icon} src={require('../assets/img/map/down.png')} />
            <div className={styles.more_text}>车辆列表</div>
          </div>
          :
          <div className={styles.project_more} onClick={()=>{ this.setState({ more: true })} }>
            <img className={styles.more_icon} src={require('../assets/img/map/up.png')} />
            <div className={styles.more_text}>车辆列表</div>
          </div>}
      </div>
    )
  }
}